<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    {{/*        <link rel="stylesheet" href="../static/element-ui/index.css">*/}}
    <style>
    </style>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-header id="header">
        <label class="title">本地链码开发工具</label>
    </el-header>
    <div id="container">
        <div id="list">
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
                <el-menu-item index="1">环境管理</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">链码管理</template>
                    <el-menu-item index="2-1">链码安装</el-menu-item>
                    <el-menu-item index="2-2">链码实例化</el-menu-item>
                    <el-menu-item index="2-3">链码调用</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div id="content" v-loading="loading" :element-loading-text="loading_text">
            <div v-if="activeIndex == '1'">
                <div id="env" style="margin-bottom: 20px;">
                    <el-button type="primary" @click="setup">启动环境</el-button>
                    <el-button type="danger" @click="clean">清理环境</el-button>
                    <el-button type="primary" @click="getStatus">刷新</el-button>
                    <span style="margin-left: 20px">
                        当前状态:
                        <span v-if="status == false" style="color: #f56c6c">未启动环境</span>
                        <span v-else style="color: #67c23a">环境已启动</span>
                    </span>
                </div>
                <div id="containers" v-if="containers.length">
                    <el-table :data="containers">
                        <el-table-column prop="container_name" label="容器名称" width="160">
                        </el-table-column>
                        <el-table-column prop="image" label="镜像" width="280">
                        </el-table-column>
                        <el-table-column prop="healthy" label="运行状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.healthy">
                                    <i class="status-success"></i>
                                </div>
                                <div v-else>
                                    <i class="status-failed"></i>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-else-if="activeIndex == '2-1'">
                <el-form :model="cc" label-width="160px">
                    <el-form-item label="选择项目安装链码：">
                        <el-col :span="8">
                            <el-select v-model="cc.name" placeholder="选择项目">
                                <el-option v-for="item in ccUninstall" :key="item.name" :label="item.name"
                                           :value="item"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="链码版本：">
                        <el-col :span="8">
                            <el-input v-model="cc.version"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="ccInstall">安装</el-button>
                        <span style="margin-left: 20px">
                            <el-button type="info" @click="dialogVisible = true">查看日志</el-button>
                        </span>
                        <span style="margin-left: 20px">
                            <el-button type="primary" @click="ccInstallFeedback">已安装成功</el-button>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
            <div v-else-if="activeIndex == '2-2'">
                <el-form :model="instantiateForm" label-width="150px">
                    <el-form-item label="选择已安装链码：">
                        <el-col :span="8">
                            <el-select v-model="instantiateForm.chaincode" placeholder="选择已安装链码">
                                <el-option v-for="item in ccInstalled" :key="item.name" :label="item.name"
                                           :value="item"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item v-for="(param, index) in instantiateForm.params"
                                  :label="'参数：' + index" :key="param.key"
                    >
                        <el-col :span="14">
                            <span v-if="param.canModify">
                                <span v-if="param.type === 'string'">
                                    <el-input v-model="param.value"/>
                                </span>
                                <span v-else="">
                                   <el-input type="textarea" v-model="param.value" rows="15"/>
                                </span>
                            </span>
                            <span v-else>
                                <label>${param.value}</label>
                            </span>
                        </el-col>
                        <el-col :span="4" v-if="param.canModify" style="margin-left: 20px">
                            <el-select v-model="param.type" placeholder="参数类型">
                                <el-option label="string" value="string"></el-option>
                                <el-option label="json" value="json"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" v-if="param.canModify" style="margin-left: 10px">
                            <el-button type="danger" @click="removeInstantiateFormParam(param)">删除</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="addInstantiateFormParam">新增参数</el-button>
                        <el-button type="primary" @click="ccInstantiate">实例化</el-button>
                        <span style="margin-left: 20px">
                            <el-button type="info" @click="dialogVisible = true">查看日志</el-button>
                        </span>
                        <span style="margin-left: 20px">
                            <el-button type="primary" @click="ccInstantiateFeedback">已实例化成功</el-button>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
            <div v-else-if="activeIndex == '2-3'">
                <el-form :model="invokeForm" label-width="150px">
                    <el-form-item label="选择已实例化链码：">
                        <el-col :span="8">
                            <el-select v-model="invokeForm.chaincode" placeholder="选择已实例化链码">
                                <el-option v-for="(name, index) in ccInstantiated" :key="index" :label="name"
                                           :value="name"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="链码方法名：">
                        <el-col :span="12">
                            <el-input v-model="invokeForm.function_name"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item v-for="(param, index) in invokeForm.params"
                                  :label="'参数：' + index" :key="param.key"
                    >
                        <el-col :span="14">
                            <span v-if="param.canModify">
                                <span v-if="param.type === 'string'">
                                    <el-input v-model="param.value"/>
                                </span>
                                <span v-else="">
                                   <el-input type="textarea" v-model="param.value" rows="15"/>
                                </span>
                            </span>
                            <span v-else>
                                <label>${param.value}</label>
                            </span>
                        </el-col>
                        <el-col :span="4" v-if="param.canModify" style="margin-left: 20px">
                            <el-select v-model="param.type" placeholder="参数类型">
                                <el-option label="string" value="string"></el-option>
                                <el-option label="json" value="json"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" v-if="param.canModify" style="margin-left: 10px">
                            <el-button type="danger" @click="removeInvokeFormParam(param)">删除</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="addInvokeFormParam">新增参数</el-button>
                        <el-button type="primary" @click="ccInvoke">调用</el-button>
                        <span style="margin-left: 20px">
                            <el-button type="info" @click="dialogVisible = true">查看日志</el-button>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <el-dialog
            title="日志"
            :visible.sync="dialogVisible"
            width="80%">
        <div class="log">
            <pre><code>${log}</code></pre>
        </div>
        <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../static/element-ui/index.js"></script>
<style>
    #header {
        background-color: #1a1b20 !important;
        color: #fff;
        height: 30px;
        padding-top: 15px;
    }

    .title {
        color: white;
        font-size: 20px;
    }

    #container {
        float: left;
        width: 1200px;
    }

    #list {
        float: left;
        width: 270px;
    }

    #content {
        float: left;
        margin: 20px;
        width: 700px;
    }

    .status-success {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #f0f9eb;
        border-radius: 50%;
        border: 1px solid #67c23a;
    }

    .status-failed {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #fef0f0;
        border-radius: 50%;
        border: 1px solid #f56c6c;
    }

    .log {
        margin: 0 40px;
        overflow: auto;
    }

</style>

<script>
    var vue = new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        data: {
            activeIndex: "",
            status: false,
            containers: [],
            cc: {},
            ccUninstall: [],
            ccInstalled: [],
            ccInstantiated: [],
            log: null,
            loading: false,
            loading_text: "",
            dialogVisible: false,
            instantiateForm: {
                params: [],
            },
            invokeForm: {
                params: [],
            },
            json: {
                hello: "1212"
            }
        },
        created() {
            this.getActiveIndex();
            this.getStatus();
            this.ccGet();
        },
        methods: {
            getActiveIndex() {
                this.activeIndex = localStorage.getItem("active_index")
            },
            handleSelect(key) {
                localStorage.setItem("active_index", key);
                this.activeIndex = key
            },
            setup() {
                this.getStatus();
                if (this.status) {
                    this.$message.info('环境已启动');
                    return
                }
                this.loading = true;
                this.loading_text = '环境正在拼命启动中，请稍后';
                var that = this;
                $.ajax({
                    url: "/setup",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        console.log(response.data);
                        that.status = response.data.status;
                        that.containers = response.data.containers;
                        that.loading = false;
                        that.loading_text = '';
                        that.ccGet();
                        that.$message.success('环境启动成功');
                    }
                });
            },
            getStatus() {
                var that = this;
                $.ajax({
                    url: "/status",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        console.log(response.data);
                        that.status = response.data.status;
                        that.containers = response.data.containers
                    }
                });
            },
            clean() {
                this.getStatus();
                if (!this.status) {
                    this.$message.info('环境已清理');
                    return
                }
                this.loading = true;
                this.loading_text = '环境正在拼命清理中，请稍后';
                var that = this;
                $.ajax({
                    url: "/clean",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        console.log(response);
                        that.getStatus();
                        that.loading = false;
                        that.loading_text = '';
                        that.ccGet();
                        that.$message.success('环境清理成功');
                    }
                });
            },
            ccUninstallGet() {
                var that = this;
                $.ajax({
                    url: "/chaincode/uninstall",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.ccUninstall = response.data;
                    }
                });
            },
            ccInstalledGet() {
                var that = this;
                $.ajax({
                    url: "/chaincode/installed",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.ccInstalled = response.data;
                    }
                });
            },
            ccInstantiatedGet() {
                var that = this;
                $.ajax({
                    url: "/chaincode/instantiated",
                    type: "get",
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.ccInstantiated = response.data;
                    }
                });
            },
            ccGet() {
                this.ccUninstallGet();
                this.ccInstalledGet();
                this.ccInstantiatedGet();
            },
            ccInstall() {
                var obj = {
                    name: this.cc.name,
                    version: this.cc.version,
                };
                this.loading = true;
                this.loading_text = '链码正在安装，请稍后';
                var that = this;
                $.ajax({
                    url: "/chaincode/install",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(obj),
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.log = response.data.log;
                        that.loading = false;
                        that.loading_text = '';
                        that.$message.success("链码" + obj.name + "安装结束")
                    }
                });
            },
            ccInstallFeedback() {
                var obj = {
                    name: this.cc.name,
                    version: this.cc.version,
                };
                var that = this;
                $.ajax({
                    url: "/chaincode/install/feedback",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(obj),
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.ccGet();
                        that.$message.success("链码" + obj.name + "安装成功")
                    }
                });
            },
            addInstantiateFormParam() {
                this.instantiateForm.params.push({
                    key: Date.now(),
                    type: 'string',
                    canModify: true,
                })
            },
            removeInstantiateFormParam(item) {
                var index = this.instantiateForm.params.indexOf(item)
                if (index !== -1) {
                    this.instantiateForm.params.splice(index, 1)
                }
            },
            ccInstantiate() {
                if (this.instantiateForm.chaincode === null || this.instantiateForm.chaincode === undefined) {
                    this.$message.warning('请选择一个已安装的链码进行实例化');
                    return
                }
                var args = [];
                for (let i = 0; i < this.instantiateForm.params.length; i++) {
                    args.push(this.instantiateForm.params[i].value)
                }
                var obj = {
                    name: this.instantiateForm.chaincode.name,
                    version: this.instantiateForm.chaincode.version,
                    args: args,
                };
                this.loading = true;
                this.loading_text = '链码正在实例化，请稍后';
                var that = this;
                $.ajax({
                    url: "/chaincode/instantiate",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(obj),
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.log = response.data.log;
                        that.loading = false;
                        that.loading_text = '';
                        that.$message.success("链码" + obj.name + "实例化结束")
                    }
                });
            },
            ccInstantiateFeedback() {
                var obj = {
                    name: this.instantiateForm.chaincode.name,
                    version: this.instantiateForm.chaincode.version,
                };
                var that = this;
                $.ajax({
                    url: "/chaincode/instantiate/feedback",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(obj),
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.ccGet();
                        that.$message.success("链码" + obj.name + "实例化成功")
                    }
                });
            },
            addInvokeFormParam() {
                this.invokeForm.params.push({
                    key: Date.now(),
                    type: 'string',
                    canModify: true,
                })
            },
            removeInvokeFormParam(item) {
                var index = this.invokeForm.params.indexOf(item);
                if (index !== -1) {
                    this.invokeForm.params.splice(index, 1)
                }
            },
            ccInvoke() {
                var args = [];
                for (let i = 0; i < this.invokeForm.params.length; i++) {
                    args.push(this.invokeForm.params[i].value)
                }
                var obj = {
                    name: this.invokeForm.chaincode,
                    function_name: this.invokeForm.function_name,
                    args: args,
                };
                var that = this;
                $.ajax({
                    url: "/chaincode/invoke",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(obj),
                    error: function (e) {
                        console.log(e);
                        that.$message.error(e);
                    },
                    success: function (response) {
                        that.log = response.data.response;
                        that.$message.success("链码" + obj.name + "调用成功")
                    }
                });
            }
        }
    })
</script>
</html>